<!-- 我的邀请 -->
<template>
	
	<view>
		<u-image src="/static/images/index/i_1.png" alt="" width="100%" mode="widthFix" style="position: absolute;z-index: 0;left:0;top:0">
		</u-image>
		<view class="floating-text">
			<text>获消费金额{{price}}%的佣金奖励</text>
		</view>
		<view class="invite_content_box">

	
		<view class="invite_item_box">
			<view class="title_icon">
				<image src='/static/images/index/i_2.png'></image>
				<text>邀请码</text>
			</view>
			<view style="text-align: center;
			font-weight: bold;
			font-size: 48rpx;
			color: #FE2864;
			padding-top: 72rpx;
			">{{invitationCode}}</view>
			
			<view class="code_btn_box" style="display: flex;justify-content: center;padding-top: 20rpx;">
				<!-- #ifdef H5 -->
				<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
					:ripple="true">一键分享</u-button>
				<!-- #endif -->
				
				<!-- #ifdef APP -->
				<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
					:ripple="true">一键分享</u-button>
				<!-- #endif -->
				
				<!-- #ifdef MP-TOUTIAO || MP-KUAISHOU -->
				<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
					:ripple="true">一键分享</u-button>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
					:ripple="true">一键分享</u-button>
				<!-- #endif -->
				<!-- #ifndef MP-KUAISHOU -->
				<u-button style="margin-left: 50rpx;" @click.stop="onSaveImg()" :custom-style="customStyle"
					:hair-line="false" shape="circle" size="mini" :ripple="true">保存海报</u-button>
				<!-- #endif -->
			</view>
		</view>
		
		<view class="margin padding bg-white radius" v-if="inviterList.length">
			<view class="flex justify-between" style="line-height: 80rpx;" v-for="(item, index) in inviterList"
				:key='index'>
				<view class="flex">
					<!-- <u-image :src="item.avatar == null?avatar:item.avatar" width="40px" mode="widthFix"></u-image> -->
					<image src="../static/invite/5.png" style="width: 80rpx;" mode="widthFix"></image>
					<text class="margin-left-sm">{{item.userName}}</text>
				</view>
				<view>
					<text>获得</text>
					<text class="margin-left-xs text-red">{{item.money}}</text>
				</view>
			</view>
		</view>
		
		<view class="invite_item_box" style="height: 200rpx;">
			<view class="title_icon">
				<image src='/static/images/index/i_2.png'></image>
				<text>邀请战绩</text>
			</view>
			<view class="inv_prize_box">
				<view class="v_item">
					<view class="num_box">
						<text>{{inviterNumber}}</text>
						<text>位</text>
					</view>
					<view class="v_label">已邀请</view>
				</view>
				<view class="v_item">
					<view class="num_box">
						<text>{{cumulativeRevenue}}</text>
						<text>元</text>
					</view>
					<view class="v_label">累计收益</view>
				</view>
				<view class="v_item">
					<view class="num_box">
						<text>{{withdrawn}}</text>
						<text>元</text>
					</view>
					<view class="v_label">已提现</view>
				</view>
			</view>
		</view>
		
		
		<!-- <view class="padding" style="position: relative;height: 160px;">
			<u-image src="@/me/static/invite/yaoqing.png" alt="" width="100%" height="100%"></u-image>
			<view class="text-center padding-top flex justify-center flex-direction zhanji">
				<view class="flex justify-around margin-top-sm" @click="goNav('/me/invite/inviteDet')">
					<view>
						<view class="margin-bottom-sm">已邀请</view>
						<view class="text-red"><text class="text-bold u-font-18">{{inviterNumber}}</text>人</view>
					</view>
					<view>
						<view class="margin-bottom-sm">累计收益</view>
						<view class="text-red"><text class="text-bold u-font-18">{{cumulativeRevenue}}</text>元</view>
					</view>
					<view>
						<view class="margin-bottom-sm">已提现</view>
						<view class="text-red">¥<text class="text-bold u-font-18">{{withdrawn}}</text></view>
					</view>
				</view>
			</view>
		</view> -->
		
		
		<view class="invite_item_box" style="height: 135rpx;">
			<view class="title_icon">
				<image src='/static/images/index/i_2.png'></image>
				<text>邀请技巧</text>
			</view>
			<block v-if="price2==0">
				<view style="padding-top: 50rpx;text-align: center;">
					<view class="invite_jq">邀请好友可得开通会员及消费金额 {{price}}%的佣金奖励</view>
				</view>
			</block>
			<block v-else>
				<view style="padding-top: 50rpx;text-align: center;">
					<view class="invite_jq">可得一级好友开通会员及消费金额 {{price}}%的佣金奖励</view>
					<view class="invite_jq">可得二级好友开通会员及消费金额 {{price2}}%的佣金奖励</view>
				</view>
			</block>
		</view>
		
		
		<!-- <view class="padding" style="position: relative;height: 250rpx;">
			<u-image src="@/me/static/invite/jiqiao.png" alt="" width="100%" height="100%"></u-image>
			<view class="padding-top jiqiao" style="">
				<view class="padding-top-xl padding-lr padding-bottom" style="line-height: 48rpx;">
					<block v-if="price2==0">
						<view class="flex padding-sm" style="background-color: #ffffff;">
							<text class="cuIcon-title text-yellow"></text>
							<view>邀请好友可得开通会员及消费金额 {{price}}%的佣金奖励</view>
						</view>
					</block>
					<block v-else>
						<view class="flex padding-sm" style="background-color: #ffffff;">
							<text class="cuIcon-title text-yellow"></text>
							<view>可得一级好友开通会员及消费金额 {{price}}%的佣金奖励</view>
						</view>
						<view class="flex padding-sm" style="background-color: #ffffff;">
							<text class="cuIcon-title text-yellow"></text>
							<view>可得二级好友开通会员及消费金额 {{price2}}%的佣金奖励</view>
						</view>
					</block>

				</view>
			</view>
		</view> -->


		<tki-qrcode ref="qrcode" :val="erweima" :size="200" background="#fff" foreground="#000" pdground="#000"
			:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="bgImg && erweimapath && haibaoShow" @tap="hideModal">
				<view class="bg-img">
					<wm-poster @success="posterSuccess" @successH5="successH5" :imgSrc="bgImg"
						:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :LineType="false"></wm-poster>
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>

<script>
	let settingWritePhotosAlbum = false;
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	import wmPoster from '../components/wm-poster/wm-posterorders.vue';
	import config from '../../common/config.js'
	export default {
		components: {
			tkiQrcode,
			wmPoster
		},
		data() {
			return {
				erweimapath: '',
				poster: {},
				qrShow: false,
				haibaoImg: null,
				haibaoShow: false,
				modalName: '',
				canvasId: 'default_PosterCanvasId',
				avatar: '../../static/images/logo.png',
				customStyle: {
					background: '#E4741C',
					border: '0',
					color: '#FFFFFF',
					fontSize: '12px',
					fontWeight: '500',
					padding: '15px 20px',
				},
				page: 1,
				limit: 1000,
				inviterName: '', //邀请码
				cumulativeRevenue: '', //累计收益
				inviterNumber: '', //邀请人数
				withdrawn: '', //已提现
				inviterList: [],
				erweima: '',
				bgImg: '',
				tuiguang: '',
				invitationCode: 0,
				price: 0,
				price2: 0,
				h5SaveImg: '',
				modalName: '',
				haibaoImgH5: '',
				qdCode: '', //渠道码
			}
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImg
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImg
			}
		},
		onLoad() {
			this.getInviter()
			this.queryInviter()

			this.invitationCode = uni.getStorageSync('invitationCode')
			this.getUserInfoBl()
			this.getBgImg()
			if (uni.getStorageSync('qdCode')) {
				this.qdCode = uni.getStorageSync('qdCode')
			}
			// h5携带邀请码去首页
			// #ifdef H5
			this.erweima = config.APIHOST2 + '/?invitation=' + this
				.invitationCode + '&qdCode=' + this.qdCode
			// #endif
			// app直接去app注册页面
			// #ifdef APP
			this.erweima = config.APIHOST2 + '/pages/login/registerApp/?invitation=' + this
				.invitationCode + '&qdCode=' + this.qdCode
			// #endif
			// #ifdef MP-WEIXIN
			this.getWxEq()
			// #endif
			// #ifdef MP-TOUTIAO
			this.getTouTiao()
			// #endif
		},
		methods: {
			//获取用户分销比例
			getUserInfoBl() {
				this.$Request.getT('/app/user/selectUserById').then(res => {
					if (res.code == 0) {
						//一级分销
						if (res.data.rate) {
							this.price = (Number(res.data.rate) * 100).toFixed(0)
						} else {
							this.price = 0
						}
						//二级分销
						if (res.data.twoRate) {
							this.price2 = (Number(res.data.twoRate) * 100).toFixed(0)
						} else {
							this.price2 = 0
						}
					}
				})
			},
			//获取头条二维码
			getTouTiao() {
				let that = this
				uni.downloadFile({
					url: config.APIHOST +
						'/app/invite/dyCreateQr?invitationCode=' + that
						.invitationCode + ',' + that.qdCode + '&page=/pages/index/index',
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							that.erweimapath = res.tempFilePath
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: err => {
						console.log(err)
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			//获取微信二维码
			getWxEq() {
				let that = this
				uni.downloadFile({
					url: config.APIHOST +
						'/app/invite/mpCreateQr?invitationCode=' + that
						.invitationCode + ',' + that.qdCode,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							that.erweimapath = res.tempFilePath
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: err => {
						console.log(err)
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			sharurl() {
				let that = this;
				uni.showModal({
					title: '链接推广',
					content: this.tuiguang + this.erweima,
					showCancel: true,
					cancelText: '关闭',
					confirmText: '一键复制',
					success: res => {
						if (res.confirm) {
							uni.setClipboardData({
								data: this.tuiguang + this.erweima,
								success: function() {
									console.log('success');
									uni.showToast({
										title: '复制成功',
										duration: 1000,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
				uni.hideLoading();
			},
			successH5(haibaoImg) {
				this.haibaoImgH5 = haibaoImg
				uni.previewImage({
					urls: [haibaoImg],
					current: 1,
				})
			},
			showModal() {
				// #ifndef H5
				if (!this.haibaoImg) {
					this.haibaoShow = true;
					uni.showLoading({
						title: '海报生成中'
					});
				} else {
					this.modalName = 'Image';
				}
				// #endif
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') !== -1) {
					//微信浏览器
					if (!this.haibaoImg) {
						this.haibaoShow = true;
						uni.showLoading({
							title: '海报生成中'
						});
					} else {
						this.modalName = 'Image';
					}
				} else {
					if (!this.haibaoImgH5) {
						this.haibaoShow = true;
						uni.showLoading({
							title: '海报生成中'
						});
					} else {
						uni.previewImage({
							urls: [this.haibaoImgH5],
							current: 1,
						})
					}

				}
				// #endif
			},
			hideModal() {
				this.modalName = null;
			},
			qrR(path) {
				this.erweimapath = path;
			},
			getInviter() {
				let data = {
					page: this.page,
					limit: 1000
				}
				this.$u.api.inviter(data).then(res => {
					if (res.code == 0) {
						this.inviterList = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			queryInviter() {
				this.$u.api.queryInviter().then(res => {
					if (res.code == 0) {
						this.cumulativeRevenue = res.data.inviteMoney.moneySum //累计收益
						this.inviterNumber = res.data.inviteCount //邀请人数
						this.withdrawn = res.data.inviteMoney.cashOut //已提现
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},


			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},

			//获取背景图
			getBgImg() {
				this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
					if (res.code == 0) {
						this.bgImg = res.data[0].imageUrl
						this.tuiguang = res.data[0].describes
						console.log(this.bgImg)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},

			//生成h5海报
			createH5Poster() {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 375, 673);
					ctx.setFillStyle("#FFF");
					ctx.fillRect(0, 0, 375, 673);
					let imgUrl = that.bgImg;
					uni.downloadFile({
						url: imgUrl,
						success: (res) => {
							console.log(res, '***************')
							if (res.statusCode === 200) {
								uni.downloadFile({
									url: that.erweima,
									success: (res2) => {
										console.log(res2)
										if (res.statusCode === 200) {
											ctx.drawImage(res.tempFilePath, 0, 0, 375,
												500);
											// 长按识别二维码访问
											let textTop = 0;
											ctx.setFontSize(19);
											ctx.setFillStyle('#333');
											ctx.fillText("长按识别图中二维码", 17, textTop + 590);
											// 二维码
											ctx.drawImage(res2.tempFilePath, 238, textTop +
												526, 120, 120);
											ctx.draw(true, () => {
												// canvas画布转成图片并返回图片地址
												uni.canvasToTempFilePath({
													canvasId: 'poster',
													width: 375,
													height: 673,
													success: (res) => {
														console.log(
															"海报制作成功！"
														);
														resolve(res
															.tempFilePath
														);
													},
													fail: () => {
														uni
															.hideLoading();
														reject();
													}
												})
											});
										} else {
											uni.hideLoading();
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									},
									fail: err => {
										console.log(err)
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败',
											icon: 'none'
										});
									},
									complete: com => {
										console.log(com)
										uni.showToast({
											title: com,
											icon: 'none'
										});
									},
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							// that.yu.toast(err)
							console.log(err)
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none',
							});
						}
					});
				});
			},

			//生成海报
			createPoster() {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 375, 673);
					ctx.setFillStyle("#FFF");
					ctx.fillRect(0, 0, 375, 673);
					let imgUrl = that.bgImg;
					uni.downloadFile({
						url: imgUrl,
						success: (res) => {
							console.log(res, '***************')
							if (res.statusCode === 200) {
								uni.downloadFile({
									url: config.APIHOST +
										'/app/invite/mpCreateQr?invitationCode=' + that
										.invitationCode,
									// url: 'https://jiaoyu.xianmxkj.com/sqx_fast/app/invite/mpCreateQr?invitationCode=' +
									// 	that.invitationCode,
									success: (res2) => {
										console.log(res2)
										if (res.statusCode === 200) {
											ctx.drawImage(res.tempFilePath, 0, 0, 375,
												500);
											// 长按识别二维码访问
											let textTop = 0;
											ctx.setFontSize(19);
											ctx.setFillStyle('#333');
											ctx.fillText("长按识别图中二维码", 17, textTop + 590);
											// 二维码
											ctx.drawImage(res2.tempFilePath, 238, textTop +
												526, 120, 120);
											ctx.draw(true, () => {
												// canvas画布转成图片并返回图片地址
												uni.canvasToTempFilePath({
													canvasId: 'poster',
													width: 375,
													height: 673,
													success: (res) => {
														console.log(
															"海报制作成功！"
														);
														resolve(res
															.tempFilePath
														);
													},
													fail: () => {
														uni
															.hideLoading();
														reject();
													}
												})
											});
										} else {
											uni.hideLoading();
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									},
									fail: err => {
										console.log(err)
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败',
											icon: 'none'
										});
									},
									complete: com => {
										console.log(com)
										uni.showToast({
											title: com,
											icon: 'none'
										});
									},
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							// that.yu.toast(err)
							console.log(err)
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none',
							});
						}
					});
				});
			},
			// 保存图片
			async onSaveImg() {
				this.showModal();
				return
				// #ifndef MP-WEIXIN
				this.showModal();
				// #endif

				// #ifdef MP-WEIXIN
				let imgUrl = await this.createPoster();
				uni.showLoading({
					title: '海报下载中'
				});
				if (settingWritePhotosAlbum) {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								uni.saveImageToPhotosAlbum({
									filePath: imgUrl,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功'
										});
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: '请先在设置页面打开"保存相册"使用权限',
									confirmText: '去设置',
									cancelText: '算了',
									success: data => {
										if (data.confirm) {
											uni.hideLoading();
											uni.openSetting();
										}
									}
								});
							}
						}
					});
				} else {
					uni.hideLoading();
					settingWritePhotosAlbum = true;
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						}
					});
				}
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	
	
	.inv_prize_box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 60rpx;
		.v_item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.num_box{
				text{
					&:nth-child(1){
						font-weight: bold;
						font-size: 56rpx;
						color: #FD6147
					}
					&:nth-child(2){
						font-size: 30rpx;
						color: #FD6147
					}
				}
			}
			.v_label{
				font-weight: 500;
				font-size: 24rpx;
				color: #E4741C;
				padding-top: 16rpx;
			}
		}
	}
	
	.invite_jq{
		font-weight: 600;
		font-size: 24rpx;
		color: #FD6147;
	}
	.invite_item_box{
		width: 690rpx;
		height: 238rpx;
		background: #FDF2E8;
		border-radius: 8rpx;
		position: relative;
		margin-bottom: 64rpx;
		.title_icon{
			width: 264rpx;
			height: 66rpx;
			position: absolute;
			left: 213rpx;
			top: -33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 264rpx;
				height: 66rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			text{
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				position: relative;
				z-index: 10;
			}
		}
	}
	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	page {
		background: #FFBBD1;
	}

	img {
		display: block;
	}

	.poster_canvas {
		width: 750upx;
		height: 1334upx;
		position: fixed;
		top: -10000upx;
		left: 0;
	}

	.yaoqing {
		width: 100%;
		height: 136px;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-image: url('@/me/static/invite/fenxiang.png'); */
		/* background-size: 100%; */
		/* background-repeat: no-repeat; */
	}

	.zhanji {
		width: 100%;
		height: 119px;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-image: url('@/me/static/invite/yaoqing.png'); */
		/* background-size: 100%; */
		/* background-repeat: no-repeat; */
	}

	.jiqiao {
		width: 100%;
		height: 160rpx;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* 	background-image: url('@/me/static/invite/jiqiao.png');
		background-size: 100%;
		background-repeat: no-repeat; */
	}
	
	.invite_content_box{
		
		padding-top: 663rpx;
		width: 750rpx;
		position: relative;
		z-index: 2;
		padding-left: 30rpx;
	}

	.floating-text {
    position: relative; // 改为相对定位
    width: 100%;
    z-index: 99;
	padding-left: 60rpx;
    padding-top: 28rpx;
    text {
        font-size: 40rpx;
        color: #FFFFFF;
        font-weight: bold;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
}
</style>